<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Konva Rect Annotation</title>
  <script src="https://cdn.jsdelivr.net/npm/konva@8.2.0/konva.min.js"></script>
</head>
<body>
  <div id="container"></div>

  <script>
    const stage = new Konva.Stage({
      container: 'container',
      width: window.innerWidth,
      height: window.innerHeight,
    });

    const layer = new Konva.Layer();
    stage.add(layer);

    let isDrawing = false;
    let rect;

    stage.on('mousedown touchstart', (e) => {
      const pos = stage.getPointerPosition();
      rect = new Konva.Rect({
        x: pos.x,
        y: pos.y,
        width: 0,
        height: 0,
        stroke: 'black',
        strokeWidth: 2,
      });

      layer.add(rect);
      isDrawing = true;
    });

    stage.on('mousemove touchmove', () => {
      if (!isDrawing) return;

      const pos = stage.getPointerPosition();
      const width = pos.x - rect.x();
      const height = pos.y - rect.y();

      rect.width(width);
      rect.height(height);
      layer.batchDraw();
    });

    stage.on('mouseup touchend', () => {
      isDrawing = false;
    });
  </script>
</body>
</html>
